<template>
	<div>
		<UpTable
			ref="el"
			:options="tableOption"
			:data="list"
			idKey="userId"
			:loading="loading"
			:isFinish="isFinish"
			:error="error">
			<template #weeklyRank="{ data }">
				<div class="flex items-center text-t-1 justify-center">
					<base-image v-if="data.weeklyRank < 3" :src="`rank/${data.weeklyRank + 1}.svg`" />
					<div v-else>{{ data.weeklyRank + 1 }}th</div>
				</div>
			</template>
		</UpTable>
		<BaseMore :isFinish="isFinish" :loading="loading" @load="getData(false)" />
	</div>
</template>

<script setup lang="ts">
import { UpTable, TableOptions } from '@/components/up'
import { BaseMore, BaseImage } from '@/components/base'
import { useRequest } from '@/hooks'
import { Currency } from '@/enums'
import { useElementSize } from '@vueuse/core'
import { ref, computed, onMounted, watch } from 'vue'
import { getBetContestWeekly } from '@/api/other.ts'
import { useCasinoStore } from '@/store'
const props = defineProps({
	error: {
		type: Object,
		default: null
	},
	pageSize: {
		type: [Number, String],
		default: 10
	},
	lastRoundData: {
		type: Object,
		default: null
	}
})

const casinoStore = useCasinoStore()
watch(
	() => [props.pageSize],
	() => {
		getData(true)
	}
)
watch(
	// @ts-ignore
	() => casinoStore.weeklyRaceData,
	(data) => {
		updateData(data)
	}
)
const el = ref(null)
const { width } = useElementSize(el)

const tableOption = computed<TableOptions[]>(() => [
	{
		prop: 'weeklyRank',
		textT: 'race.rank',
		type: 'rank',
		align: 'center',
		width: '40px',
		slot: 'weeklyRank'
	},
	{
		type: 'space',
		width: width.value >= 500 ? '20%' : '0'
	},
	{
		prop: 'user',
		textT: 'app.rank.player',
		type: 'user'
	},
	// {
	// 	prop: 'totalBetAmount',
	// 	hoverProp: 'totalBetAmount',
	// 	textT: 'app.rank.betAmount',
	// 	align: 'right',
	// 	slot: 'currency'
	// },
	{
		prop: 'totalBetAmount',
		textT: 'app.rank.betAmount',
		align: 'right',
		type: 'amount',
		class: '!cursor-default',
		attrs: {
			currency: Currency.us
		}
	},
	{
		prop: 'totalBonusAmount',
		textT: 'race.prize',
		align: 'right',
		type: 'amount',
		class: 'text-warning !cursor-default',
		attrs: {
			currency: Currency.us
		}
	}
])
const {
	run: runBetContestWeekly,
	list,
	isFinish,
	loading
} = useRequest<any>(getBetContestWeekly, {
	pageSize: props.pageSize as number,
	paramsAlias: { page: 'pageNum' },
	resultAlias: { list: 'content', total: 'totalElements' }
})
const getData = async (refresh?: boolean) => {
	if (props.lastRoundData) {
		await runBetContestWeekly(
			{ pageSize: props.pageSize, contestId: props.lastRoundData.contestId },
			{ refresh }
		)
	} else {
		await runBetContestWeekly({ pageSize: props.pageSize }, { refresh })
	}
}
const updateData = (weeklyData: { id: any; weeklyRank: any }) => {
	for (let i = 0; i < list.value.length; i++) {
		let element = list.value[i]
		if (element.id === weeklyData.id) {
			if (element.weeklyRank === weeklyData.weeklyRank) {
				list.value[i] = weeklyData
			} else {
				getData(true)
			}
		}
	}
}
onMounted(() => {
	getData()
})
</script>
